<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="服务订单"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <van-dropdown-menu active-color="#45b7cb">
      <van-dropdown-item @change="change" v-model="value1" :options="option1" />
      <van-dropdown-item @change="change" v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <div v-show="orderlist.length != '0'" class="orderlist">
      <div
        @click="jumptoservicedetail(item.trustId, item.status, item.trustType)"
        v-for="(item, index) in orderlist"
        :key="index"
        class="order"
      >
        <van-image
          lazy-load
          :src="item.houseImage"
          fit="cover"
          radius="5px"
          v-if="item.trustType != 9"
          style="margin-right: 2.6vw; width: 32vw; height: 32vw"
        />
        <img
          src="@/assets/fang3.png"
          v-if="item.trustType == 9"
          style="
            border-radius: 5px;
            margin-right: 2.6vw;
            width: 32vw;
            height: 32vw;
          "
        />
        <div v-if="item.trustType != 9 && item.trustType != 7">
          <div>
            <span>订单名称:</span>
            <span v-if="item.trustType == '1'">房源录入</span>
            <span v-if="item.trustType == '2'">交割服务</span>
            <span v-if="item.trustType == '3'">交易服务</span>
            <span v-if="item.trustType == '4'">金融服务</span>
            <span v-if="item.trustType == '5'">二手房带看服务</span>
            <span v-if="item.trustType == '6'">新房咨询单</span>
            <span v-if="item.trustType == '7'">新房团购单</span>
            <span v-if="item.trustType == '8'">直联直买服务</span>
            <span v-if="item.trustType == '9'">购房定制需求单</span>
          </div>
          <div id="ct">
            <span>下单时间:</span><span>{{ item.createTime }}</span>
          </div>
          <div v-if="item.trustType != '8'">
            <span>服务进程:</span>
            <span v-show="item.status == '5'">等待匹配</span>
            <span v-show="item.status == '2'">进行中</span>
            <span v-show="item.status == '3'">待反馈</span>
            <span v-show="item.status == '7'">已完结</span>
          </div>
          <div v-if="item.trustType != '8'">
            <span>服务评价:</span>
            <span v-show="item.evaluate == '0'">未评价</span>
            <span v-show="item.evaluate != '0'">{{ item.evaluate }}分</span>
          </div>
          <div v-if="item.trustType != '8'">
            <span>服务佣金:</span><span>{{ item.commission }}元</span>
          </div>
          <div v-if="item.trustType == '8'">
            <span>订单编号:</span>
            <span>1655645465465</span>
          </div>
          <div v-if="item.trustType == '8'">
            <span>房源编号:</span>
            <span>H5156454656</span>
          </div>
        </div>
        <div v-if="item.trustType == 9" id="demand">
          <div>
            <span>订单名称:</span>
            <span>购房定制需求单</span>
          </div>
          <div>
            <span>房源城市:</span>
            <span>{{ item.city }}</span>
          </div>
          <div
            v-show="item.status == 3 || item.status == 7"
            @click="gophone(item.agent_mobile)"
            style="line-height: 16.09px"
          >
            <span style="font-size: 12px; color: #999">经纪人:</span>
            <span>{{ item.agent_name }} </span>
            <span>{{ item.agent_mobile }}</span>
            <van-icon
              name="phone-o"
              color="#45b7cb"
              style="margin-left: 5px; vertical-align: top"
            />
          </div>
          <div>
            <span>预计购买时间:</span>
            <span>{{ item.expect_month }}</span>
          </div>
          <div>
            <span
              v-if="item.status == 5 || item.status == 1 || item.status == 6"
              >等待匹配经纪人</span
            >
            <span v-if="item.status == 2">进行中</span>
            <span v-if="item.status == 3">等待反馈</span>
            <span v-if="item.status == 7">服务完成</span>
            <van-button
              v-if="item.status == 3"
              @click="goEvaluate(item.trustId)"
              style=
              "
                height: 20px;
                font-size: 12px;
                border-radius: 20px;
                border: none;
                padding: 0 15px;
                color: #45b7cb;
                border: 1px solid #45b7cb;
                margin-left: 3px;
              "
              >评价</van-button
            >
          </div>
        </div>
        <div v-if="item.trustType == 7" id="demand2">
          <div>
            <span>订单名称:</span>
            <span>新房团购单</span>
          </div>
          <div>
            <span>下单时间:</span>
            <span>{{ item.createTime }}</span>
          </div>
          <div>
            <span>{{ item.city }}</span>
            <span style="margin: 0 5px">|</span>
            <span>{{ item.selling_price }}元/㎡</span>
          </div>
          <div
            v-show="item.status == 3 || item.status == 7"
            @click="gophone(item.agent_mobile)"
          >
            <span style="font-size: 12px; color: #999">经纪人:</span>
            <span>{{ item.agent_name }} </span>
            <span>{{ item.agent_mobile }}</span>
            <van-icon
              name="phone-o"
              color="#45b7cb"
              style="margin-left: 5px; vertical-align: top"
            />
          </div>
          <div>
            <span
              v-if="item.status == 5 || item.status == 1 || item.status == 6"
              >等待匹配经纪人</span
            >
            <span v-if="item.status == 2">进行中</span>
            <span v-if="item.status == 3">等待反馈</span>
            <span v-if="item.status == 7">服务完成</span>
            <van-button
              v-if="item.status == 3"
              @click="goEvaluate(item.trustId)"
              style="
                height: 20px;
                font-size: 12px;
                border-radius: 20px;
                border: none;
                padding: 0 15px;
                color: #45b7cb;
                border: 1px solid #45b7cb;
                margin-left: 3px;
              "
              >评价</van-button
            >
          </div>
        </div>
      </div>
    </div>
    <div v-show="orderlist.length == '0'" class="noorder">暂无订单</div>
    <div class="tipword">
      <div>
        <span>*</span>服务订单未开始执行前可申请退款或修改（基础服务订单除外）
      </div>
      <div><span>*</span>如您在服务结束24小时内未反馈将默认已完成服务</div>
      <div></div>
    </div>
  </div>
</template>

<script>
import { buyOrderList } from "../../apis/user";
export default {
  data() {
    return {
      value1: "0",
      value2: "0",
      option1: [
        { text: "进程状态", value: "0" },
        { text: "等待匹配", value: "5" },
        { text: "进行中", value: "2" },
        { text: "待反馈", value: "3" },
        { text: "已完结", value: "7" },
      ],
      option2: [
        { text: "订单类型", value: "0" },
        // { text: "房源录入单", value: "1" },
        // { text: "新房咨询单", value: "6" },
        { text: "二手房带看服务单", value: "5" },
        { text: "新房团购单", value: "7" },
        { text: "直联直买服务单", value: "8" },
        { text: "交易服务单", value: "3" },
        { text: "金融服务单", value: "4" },
        { text: "交割服务单", value: "2" },
        { text: "购房定制需求单", value: "9" },
      ],
      orderlist: [],
      currentPage: 1,
      perPage: 10,
      loading: false,
    };
  },
  created() {
    buyOrderList({
      currentPage: this.currentPage,
      perPage: this.perPage,
      serviceStatus: this.value1,
      serviceType: this.value2,
    }).then((res) => {
      console.log(res);
      if (res.code == 201) {
        if (res.result.list.length == 0) {
          this.orderlist = [];
        } else {
          if (res.result.list.length == 10) {
            this.loading = true;
          }
          this.orderlist = res.result.list;
        }
      }
    });
  },
  methods: {
    gophone(phone) {
      window.location.href = `tel:${phone}`;
    },
    goEvaluate(id) {
      this.$router.push({ path: "/OwnerEvaluate", query: { trustId: id } });
    },
    back() {
      this.$router.go(-1);
    },
    change() {
      this.currentPage = 1;
      this.loading = true;
      buyOrderList({
        currentPage: this.currentPage,
        perPage: this.perPage,
        serviceStatus: this.value1,
        serviceType: this.value2,
      }).then((res) => {
        console.log("查询服务单", res);
        if (res.code == 201) {
          if (res.result.length == 0) {
            this.orderlist = [];
          } else {
            this.orderlist = res.result.list;
          }
        }
      });
    },
    jumptoservicedetail(e, status, type) {
      if (status != 5 && type != 9 && type != 7) {
        if (type != 8) {
          this.$router.push({
            path: "/serviceorderbuydetail",
            query: { trustId: e },
          });
        } else {
          this.$router.push({
            path: "/DirectConnection",
            query: { trustId: e },
          });
        }
      }
    },
    showScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20 && this.loading) {
        this.currentPage++;
        buyOrderList({
          currentPage: this.currentPage,
          perPage: this.perPage,
          serviceStatus: this.value1,
          serviceType: this.value2,
        }).then((res) => {
          console.log("下一页", res);
          if (res.code == 201) {
            if (res.result.list.length == 10) {
              this.loading = true;
            } else {
              this.loading = false;
            }
            this.orderlist = [...this.orderlist, ...res.result.list];
          }
        });
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
};
</script>

<style lang="less" scoped>
#demand2 {
  & > div:nth-child(4) {
    display: block;
    font-size: 14px;
    color: #666;
  }
  & > div:nth-child(5) {
    color: #d43b33;
    font-weight: bold;
    font-size: 16px;
  }
}
#demand {
  & > div:nth-child(5) {
    color: #d43b33;
    font-weight: bold;
    font-size: 16px;
  }
}
#ct {
  span:nth-child(2) {
    font-size: 12px;
    line-height: 16px;
  }
}
.orderlist {
  margin: 0 15px;
  .order {
    display: flex;
    // justify-content: space-around;
    padding: 15px 0;
    font-size: 14px;
    color: #333;
    > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      > div {
        display: flex;
        // justify-content: space-between;
      }
    }
  }
}
.tipword {
  margin: 30px 15px 0;
  font-size: 12px;
  color: #666;
  padding-bottom: 30px;
  span {
    color: #da554e;
  }
}
.noorder {
  text-align: center;
  font-size: 20px;
  margin-top: 20px;
  color: #45b7cb;
}
</style>